<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2021/10/8
  Time: 18:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/car_rental/business_outlets.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>

    <style>
        html,body,#container{
            height:100%;
            width:100%;
        }
        .amap-marker-label{
            border: 1px solid #53c4f7;
        }
    </style>
</head>
<body>
<%--${serverResponse}--%>
<div class="business">
    <!--头部导航栏-->
    <div class="header">
        <div class="head-top">
            <div class="w1180 top-linkbox">
                <div class="top-left">
                    <span><a class="size-color" href="">登录</a></span>
                    <span>|</span>
                    <span><a class="size-color" href="">免费注册</a></span>
                    <span>|</span>
                    <span><a href="">我的小橘</a></span>
                </div>
                <div class="top-right">
                    <span><a href="">帮助中心</a> </span>
                    <span>|</span>
                    <span><a href="">网址导航</a></span>
                    <span>|</span>
                    <span><a href="">English</a></span>
                    <span>|</span>
                    <span>400-888-6608</span>
                    <span>|</span>
                    <span><a href="">微信</a></span>
                </div>
            </div>
        </div>
        <div class="head-bottom">
            <div class="w1180">
                <a href="" class="logo"></a>
                <div class="nav">
                    <ul class="nav-wrap">
                        <li><a href="">首页</a></li>
                        <li><a href="">自驾租车</a></li>
                        <li><a href="">车型查询</a></li>
                        <li><a href="">营业网点</a></li>
                        <li><a href="">政企服务</a></li>
                        <li><a href="">接送服务</a></li>
                        <li><a href="">精彩活动</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--地图筛选栏-->
    <div class="business-area">
        <div class="area1">
            <ul>
                <li><span>当前城市：</span></li>
                <li><a href="">苏州市</a></li>
                <li><span>当前城区：</span></li>
                <li><a href="">吴中区</a> </li>
                <li><a href="">姑苏区</a></li>
                <li><a href="">相城区</a> </li>
            </ul>
        </div>
        <div class="area2">
            <ul>
                <li><span>热门城市：</span></li>
                <li><a href="">苏州市</a></li>
            </ul>
        </div>
    </div>
    <!--左侧门店边框-->
    <div class="business-left">
        <div class="business-left-top">
            <p>当前位置：<a href="">苏州市</a></p>
            <p>附近有<span>6</span>家门店</p>
        </div>
        <div class="business-left-store">
            <ul>
<c:forEach var="stroe" items="${serverResponse.data}">
                <li class="li">
                    <div class="store-top">
                        <div class="store-top1"><a href="">${stroe.storeName}</a></div>
                        <div class="store-top2"><a href="">上门取车</a></div>
                    </div>
                    <div class="store-main">
                        <ul>
                            <li>
                                <span>地址：</span>
                                <a href="">${stroe.storeDetailAddress}</a>
                            </li>
                            <li>
                                <span>电话：</span>
                                <a href="">${stroe.storeTel}</a>
                            </li>
                            <li>
                                <span>描述：</span>
                                <a href="">汽车租赁</a>
                            </li>
                            <li><span>创建时间</span>
                                <a href="">2018/02/23</a>
                            </li>
                            <li><a href="">查看详情</a> </li>
                        </ul>
                    </div>
                </li>
    </c:forEach>
            </ul>
        </div>
    </div>
    <!--地图-->
    <div class="business-map">
        <div id="container"></div>
    </div>
</div>
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p>
                <a href="" >关于一嗨</a>
                |
                <a href="" >移动客户端</a>
                |
                <a href="" >帮助中心</a>
                |
                <a href="" >建议专区</a>
                |
                <a href="" >联系我们</a>
                |
                <a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 上海一嗨信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="${pageContext.request.contextPath}/images/footer_right_first.png">
            </a>
            <a href="">
                <img src="${pageContext.request.contextPath}/images/footer_right_second.png">
            </a>
            <a href="">
                <img src="${pageContext.request.contextPath}/images/footer_right_third.png">
            </a>
            <a href="">
                <img src="${pageContext.request.contextPath}/images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">
    // 创建地图实例
    var map = new AMap.Map("container", {
        zoom: 12,
        center: [120.58,31.30],
        resizeEnable: true,
        mapStyle: 'amap://styles/whitesmoke'
    });
    var positions = [
        [120.70,31.40],
        [120.39,31.36],
        [120.50,31.23],
        [120.49,31.33],
        [120.47,31.53],
        [120.563195,31.3253]
    ];
    var anchor = [
        '东兴路店',
        '亿象城店',
        '苏州园区高铁站送车点',
        '苏州中医院送车点',
        '苏州世贸生活广场送车点',
        '寒山寺店'
    ]
    var pos_icon = [];
    var pos_marker = [];
    var icon = [];
    var marker = [];
    for (var i = 0; i < positions.length; i++) {
        // 创建一个 Icon
        pos_icon[i] = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(12, 12),
            // 图标的取图地址
            image: '${pageContext.request.contextPath}/images/area.png',
            // 图标所用图片大小
            imageSize: new AMap.Size(12, 12),
        });
        var labelContent = "<div class='labelContent'>anchor:"+anchor[i]+"</div>"

        // 将 Icon 传入 marker
        pos_marker[i] = new AMap.Marker({
            position: positions[i],
            icon: pos_icon[i],
            anchor: 'center', //设置锚点
            offset: new AMap.Pixel(0,0) //设置偏移量
        });
        map.add(pos_marker[i]);

        // 创建一个 Icon
        var imageUrl = '${pageContext.request.contextPath}/images/area1.png'


        icon[i] = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(46, 46),
            // 图标的取图地址
            image: imageUrl,
            // 图标所用图片大小
            imageSize: new AMap.Size(46, 46),
        });
        // 将 Icon 传入 marker
        var labelOffset = new AMap.Pixel(-23,-28);
        marker[i] = new AMap.Marker({
            position: positions[i],
            icon: icon[i],
            anchor: anchor[i], //设置锚点
            offset: new AMap.Pixel(0,0), //设置偏移量
            label: {
                content: labelContent,
                offset: labelOffset
            }
        });
        map.add(marker[i]);
    }


</script>
</body>
</html>
